<!-- 查看报告(委托型) -->
<template>
  <div class="dialog-container" id="dialog-container">
    <el-dialog
      v-dialogDrag
      :fullscreen="isFullScreen"
      :custom-class="isFullScreen?'fullscreen-default-dialog':'vertical-center-dialog'"
      append-to-body
      :close-on-click-modal="false"
      :visible.sync="dialogVisible"
      @close="$emit('update:show', false)"
      :before-close="handleClose"
      :show="show"
      width="800px"
    >
      <div slot="title">
        <span style="color:white;">查看</span>
        <button
          type="button"
          aria-label="fullScreen"
          class="el-dialog__headerbtn"
          style="margin-right:25px;"
          @click="isFullScreen = !isFullScreen"
        >
          <i class="el-dialog__close iconfont icon-fuzhicopy22"></i>
        </button>
      </div>
      <div id="pdf" style="text-align:center;">
        <!-- position:absolute;left:20%;;left:20%;margin:-150px 0 0 -200px;width:20%;height:300px; -->
        <div style="overflow: hidden; margin-top: 30px;">
          <img src="../../../../assets/images/sagw.png" style="float:left;">
          <h2 style="text-align:center;letter-spacing:10px;font-size: 32px;font-family:'微软雅黑'; font-weight:normal;">理化检测报告</h2>
          <h2 style="text-align:center;font-size: 20px;font-weight:normal;">PHYSICAL&CHYMISTRY INSPECTION REPORT</h2>
          <span style="float: right;margin-right:150px">委托单号：{{form.taskNo}}</span>
        </div>
        <el-form :model="form" ref="form" :inline="true" label-width="130px" size="small" class="margin-bottom-style">
        <el-row>
            <el-col :span="8">
              <el-form-item label="零件号：">
                <el-input v-model="form.partNumber" disabled></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="热处理炉号：">
                <el-input v-model="form.heatingNumber" disabled></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="任务类型：">
                <el-input v-model="this.taskType" disabled></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="零件名称：">
                <el-input v-model="form.partName" disabled></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="委托部门：" style="margin-left:-150px">
                <!-- <el-input v-model="form.applyUser.org.name" disabled></el-input> -->
                {{form.applyUser?(form.applyUser.org?form.applyUser.org.name:''):''}}
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="材料炉号：">
                <el-input v-model="form.materialFurnanceNumber" disabled></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
           <el-col :span="8">
              <el-form-item label="零件图号：">
                <el-input v-model="form.partGraphNumber" disabled></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="材料牌号：">
                <el-input v-model="form.materialNo" disabled></el-input>
              </el-form-item>
            </el-col>
             <el-col :span="8">
              <el-form-item label="委托日期：">
                <el-date-picker v-model="form.applyTime" type="date" disabled style="width: 200px;"></el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
             <el-col :span="8">
              <el-form-item label="图纸版本：">
                <el-input v-model="form.part.graphVersion" disabled></el-input>
              </el-form-item>
            </el-col>
            <!-- <el-col :span="12">
              <el-form-item label="委托单号：">
                <el-input v-model='form.taskNo' disabled></el-input>
              </el-form-item>
            </el-col>
          </el-row>
            <el-row>-->
            <el-col :span="8">
              <el-form-item label="需求完成日期：">
                <el-input v-model="form.expectCompleteTime" disabled></el-input>
              </el-form-item>
            </el-col>
          <!-- </el-row>
          <el-row>
            <el-col :span="24" >
              <el-form-item label="样品信息：" v-if="missionPurpose"  style="float: left; margin-left:60px">
                <el-radio-group v-model="form.sampleStatus" disabled>
                  <el-radio label="实物">实物
                    <el-input
                      v-if="form.sampleStatus == '实物'"
                      v-model="form.quantity"
                      disabled
                      style="width: 70px;margin: 0 5px;"
                    ></el-input>件
                  </el-radio>
                  <el-radio label="试样">试样
                    <el-input
                      v-if="form.sampleStatus == '试样'"
                      v-model="form.quantity"
                      disabled
                      style="width: 70px;margin: 0 5px;"
                    ></el-input>件
                  </el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row> --> 
          </el-row>
          <el-row>
             <el-col :span="8" >
                <el-form-item v-if="this.missionPurpose" colspan="3" align="left" style="position: relative;margin-left:-40px">样品信息：
                {{this.sampleStatusName}}共 {{form.quantity}} 件
                </el-form-item>
              <!-- <el-form-item label="备注：" >
                <el-input type="textarea" v-model="form.remark" disabled style="width: 580px;"></el-input>
              </el-form-item> -->
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="任务目的与要求：" v-if="this.missionPurpose" style="float: left; margin-left:80px" >
                <el-radio-group disabled v-model="form.taskTarget">
                  <el-radio label="新产品试制">新产品试制</el-radio>
                  <el-radio label="常规均匀性实验">常规均匀性实验</el-radio>
                  <el-radio label="失效零件分析">失效零件分析</el-radio>
                  <br>
                  <el-radio label="复检">复检</el-radio>
                  <el-radio label="设备新增/大修验收">设备新增/大修验收</el-radio>
                  <el-radio label="其他">其他</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-row>
          <el-tabs v-model="activeName" style="margin-left:50px">
            <el-tab-pane
              v-for="item in editableTabs"
              :label="item.title"
              :key="item.key"
              :name="item.title"
            >
              <el-table :data="tableData[item.key]" class="self-table">
                <el-table-column type="index" label="编号" align="center" width="60" ></el-table-column>
                <el-table-column prop="taskField.fieldName" label="检测项目" align="center" width="180"></el-table-column>
                <el-table-column prop="testPart" label="检测位置" align="center" width="180">
                  <template slot-scope="scope">{{getPosition(scope.row.taskField.testPart)}}</template>
                </el-table-column> -->
                <el-table-column prop="taskField.fieldStandard" label="检测要求" align="center" width="180">

                </el-table-column>
                <el-table-column prop="standardInfoStr" label="检测要求" align="center" width="320"></el-table-column>
                <!-- <el-table-column prop="taskField.partField.unit" label="单位" align="center" width="150">

                </el-table-column>-->
                <el-table-column label="实测数据" align="center">
                  <el-table-column prop="actData1" label="1" align="center" width="100">
                    <template slot-scope="scope">{{getData(scope.row,1)}}</template>
                  </el-table-column>
                  <el-table-column prop="actData2" label="2" align="center" width="100">
                    <template slot-scope="scope">{{getData(scope.row,2)}}</template>
                  </el-table-column>
                  <el-table-column prop="actData3" label="3" align="center" width="100">
                    <template slot-scope="scope">{{getData(scope.row,3)}}</template>
                  </el-table-column>
                  <!-- <el-table-column prop="actData4" label="4" align="center" width="100">
                    <template slot-scope="scope">{{getData(scope.row,4)}}</template>
                  </el-table-column>
                  <el-table-column prop="actData5" label="5" align="center" width="100">
                    <template slot-scope="scope">{{getData(scope.row,5)}}</template>
                  </el-table-column> -->
                </el-table-column>
                <el-table-column prop="device" label="检测设备" align="center" width="150">
                  <template slot-scope="scope">
                    <el-select v-model="scope.row.deviceId" disabled>
                      <el-option
                        v-for="item in scope.row.taskField.deviceList"
                        :key="item.id"
                        :label="item.codeAndName"
                        :value="item.id"
                      ></el-option>
                    </el-select>
                  </template>
                </el-table-column>
                <el-table-column prop="remark" label="备注" align="center" width="250" >
                  <template
                    slot-scope="scope"
                  >{{scope.row.testResult == 1 ? 'PASS': 'NOT PASS'}} {{scope.row.remark}}</template> 
                </el-table-column>
                <el-table-column prop="remark" label="附件" align="center" width="200">
                  <template slot-scope="scope">
                    <a
                      href="javascript:void(0)"
                      @click="downloadResultAttach(scope.row.id)"
                    >{{scope.row.fileName}}</a>
                  </template>
                </el-table-column>
              </el-table>
            </el-tab-pane>
            <!-- <el-tab-pane label="样品2" name="second">
              样品2
            </el-tab-pane>-->
          </el-tabs>
          <el-card shadow="never">
            <el-form-item label="报告结论：" style="float: left; margin-left:30px" >
              <!-- <el-radio-group v-model="form.testResult" disabled>
              <el-radio :label="1">符合</el-radio>
              <el-radio :label="0">不符合</el-radio>
              </el-radio-group>-->
              {{reportResult}}
            </el-form-item>
          </el-card>
          <hr>
          <div>
          <el-row>
            <div class="img-postion" v-if="base64Img != ''"> <img :src="base64Img" style="float:left; width: 150px; height: 70px;"></div>
           <el-col :span="8">
              <el-form-item label-width="170px" label="主检人Chief  tested  by：" style="float: left; margin-left:90px">
                    <!-- {{form.operateUser?form.operateUser.name:''}} -->
            </el-form-item>
            </el-col>
            <div class="img-baseImg" v-if="baseImg != ''">
                   <img :src="baseImg" style="float:left; width: 150px; height: 70px;">
             </div>
            <el-col :span="8">
              <el-form-item
                label-width="160px"
                label="审核人Reviewed  by："
              ></el-form-item>
              <!-- {{form.auditUser?form.auditUser.name:''}} -->
            </el-col>
            <div class="img-base" v-if="revImg != ''">
                   <img :src="revImg" style="float:left; width: 150px; height: 70px;">
             </div>
            <el-col :span="8">
              <el-form-item label-width="120px" label="审核日期Date Ve">{{form.auditTime}}</el-form-item>
            </el-col>
          </el-row>
          </div>
          <hr>
          <el-card shadow="never" class="my-div">
            <el-row>
              <el-col :span="3" style="margin-left:20px">注Note：</el-col>
              <el-col :span="20" style="text-align:left; ">本报告只对来件而言。This report is only about had been received part.
                <br>本报告一式两联，一份交于委托方，一份理化室存档。This report by one and two together, a junction to the client, another one physical and chemical room archive.
              </el-col>
            </el-row>
          </el-card>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submit()">确 定</el-button>
        <!-- <el-button type="primary" @click="getPdf">生成pdf</el-button> -->
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  getApplyInfoByIdService,
  getPositionList,
  getTypeList,
  getSampleStatusPhase,
  postDeleteAttach,
  getSampleStatusDrop
} from "service/task";
import { getLableFromList } from "utils/common";
import { RESULT_LIST } from "service/constant";
import {
  postSaveReportService,
  postReportAuditService,
  postReportSecondAuditService
} from "service/task";
import html2Canvas from "html2canvas";
import JsPDF from "jspdf";
export default {
  data() {
    return {
      sampleStatusName:"",
      missionPurpose:true,
      isFullScreen: true,
      htmlTitle: "理化检测报告",
      dialogVisible: this.show,
      activeName: "样品1",
      reportResult: "",
      imgUrl: "",
      taskType:"",
      base64Img: "",
      baseImg: "",
      revImg: "",
      form: {
        orderid: "",
        auditUser: {},
        operateUser: {},
        applyUser: {},
        part: {}
      },
      tableData: [],
      editableTabs: [],
      positionList: [],
      sampleStatusPhaseList: []
    };
  },
  props: {
    show: {
      type: Boolean,
      default: false
    },
    taskId: {
      type: String
    }
  },
  mounted() {
    getPositionList().then(res1 => {
      this.positionList = res1.data.result;
    });
    getSampleStatusPhase().then(res => {
      this.sampleStatusPhaseList = res.data.result;
    });
  },
  watch: {
    show() {
      this.dialogVisible = this.show;
      if (this.dialogVisible) {
        getApplyInfoByIdService(this.taskId).then(res => {
          // let taskTarget = res.data.result.taskTarget.split(",");
          // this.form.taskNo = ;
          // this.form.applyTime = res.data.result.applyTime;
          // this.form.taskType = res.data.result.taskType;
          // this.form.applyOrgName = res.data.result.applyUser.org.name;
          // this.form.applyUser = res.data.result.applyUser.name;
          // this.form.expectCompleteTime = res.data.result.expectCompleteTime;
          // this.form.projectNo = res.data.result.projectNo;
          // this.form.partNumber = res.data.result.partNumber;
          // this.form.partGraphNumber = res.data.result.partGraphNumber;
          // this.form.partName = res.data.result.partName;
          // this.form.materialNo = res.data.result.materialNo;
          // this.form.totalPartNo = res.data.result.totalPartNo;
          // this.form.sampleStatusPhase = res.data.result.sampleStatusPhase;
          // this.form.materialFurnanceNumber =
          //   res.data.result.materialFurnanceNumber;
          // this.form.heatingNumber = res.data.result.heatingNumber;
          // this.form.sampleStatus = res.data.result.sampleStatus;
          // this.form.quantity = res.data.result.quantity;
          // this.form.batchNumber = res.data.result.batchNumber;
          // this.form.provider = res.data.result.provider;
          // this.form.remark = res.data.result.remark;
          this.form = res.data.result;
          getSampleStatusDrop().then(res2 => {
              for(let i=0; i<res2.data.result.length;i++){
                  if(res.data.result.sampleStatus==res2.data.result[i].code){
                  this.sampleStatusName=res2.data.result[i].name;
                  }
              }
          });
          if(res.data.result.taskType != 1){
            this.missionPurpose=false;
          };
          if(res.data.result.taskType == 1){
            this.taskType="委托型";
          }
          if(res.data.result.taskType == 2){
            this.taskType="生产型";
          }
          if(res.data.result.taskType == 3){
            this.taskType="非WIP生产型";
          }
           let image = new Image();
           let imge = new Image();
           let imga = new Image();
           image.setAttribute("crossOrigin",'Anonymous')
           image.src = `${process.env.API_URL}elecSeal/downloadAttachByUserId?userId=${this.form.auditUser?this.form.auditUser.username:''}`;
           let that = this;
           image.onload = function(){
            that.base64Img = that.getBase64Image(image);
           };
            imge.setAttribute("crossOrigin",'Anonymous')
            imge.src = `${process.env.API_URL}elecSignature/downloadAttachByUserName?userName=${this.form.reportUser?this.form.reportUser.username:''}`;
            imge.onload = function(){
              that.baseImg = that.getBase64Image(imge);
            };
            imga.setAttribute("crossOrigin",'Anonymous')
            imga.src = `${process.env.API_URL}elecSignature/downloadAttachByUserName?userName=${this.form.auditUser?this.form.auditUser.username:''}`;
            imga.onload = function(){
              that.revImg = that.getBase64Image(imga);
            };
          // this.form.taskTarget = taskTarget;
          this.form.part = res.data.result.part ? res.data.result.part : {};
          this.tableData = [];
          this.editableTabs = [];

          if (!this.form.applyUser) {
            this.form.applyUser = {};
          }

          if (!this.form.auditUser) {
            this.form.auditUser = {};
          }
          if (!this.form.secondAuditUser) {
            this.form.secondAuditUser = {};
          }

          let resultData = res.data.result.taskResultList;
          let str="";
          let scode ="";
          let fie = "";
          let rem ="";
          for (var i = 0; i < resultData.length; i++) {
              if (resultData[i].taskField.partField.unit != null) {
                resultData[i].standardInfoStr =
                  resultData[i].taskField.fieldStandard +
                  "(" +
                  resultData[i].taskField.standardInfo +
                  ")" +
                  resultData[i].taskField.partField.unit;
              } else {
                resultData[i].standardInfoStr =
                  resultData[i].taskField.fieldStandard +
                  "(" +
                  resultData[i].taskField.standardInfo +
                  ")";
              }
              this.scode="";
              if(resultData[i].taskField.deviceList.length >0){
                 this.scode = resultData[i].taskField.deviceList[0].code;
              }
              this.rem="";
              if(resultData[i].testResult == 1){
                    this.rem= "PASS";
              }else{
                    this.rem= "NOT PASS";
              }
              this.actData1 = this.getData(resultData[i],1);
              this.actData2 = this.getData(resultData[i],2);
              this.actData3 = this.getData(resultData[i],3);
              this.fie = this.getPosition(resultData[i].taskField.testPart);
              if(this.actData1 == null){
                this.actData1 = "/";
              }
              if(this.actData2 == null){
                this.actData2 = "/";
              }
              if(this.actData3 == null){
                this.actData3 = "/";
              }
              //拼接表格的行和列
              str = "<tr><td>" + (i+1) + "</td><td>" + resultData[i].taskField.fieldName
              + "</td><td>" + this.fie + "</td><td>" + resultData[i].standardInfoStr + "</td><td width='5%'>"
               + this.actData1 + "</td><td width='5%'>"+ this.actData2 + "</td><td width='5%'>"+ this.actData3 + "</td><td>" + this.scode + "</td><td>"+ this.rem + resultData[i].remark+ "</td></tr>";
              //追加到table中
              $("#tab").append(str);
          }
          for (let i = 0; i < res.data.result.quantity; i++) {
            this.tableData.push([]);
            this.editableTabs.push({
              title: `样品${i + 1}`,
              key: i
            });
          }
          for (let i = 0; i < resultData.length; i++) {
            this.tableData[resultData[i].sampleNo].push(resultData[i]);
            if (resultData[i].taskField.partField.unit != null) {
              resultData[i].standardInfoStr =
                resultData[i].taskField.fieldStandard +
                "(" +
                resultData[i].taskField.standardInfo +
                ")" +
                resultData[i].taskField.partField.unit;
            } else {
              resultData[i].standardInfoStr =
                resultData[i].taskField.fieldStandard +
                "(" +
                resultData[i].taskField.standardInfo +
                ")";
            }
          }
          this.getReportResult();
        });
      }
    }
  },
  methods: {
    getBase64Image(img) {
        var canvas = document.createElement("canvas");
        canvas.width = img.width;
        canvas.height = img.height;
        var ctx = canvas.getContext("2d");
        ctx.drawImage(img, 0, 0, img.width, img.height);
        var ext = img.src.substring(img.src.lastIndexOf(".")+1).toLowerCase();
        var dataURL = canvas.toDataURL("image/"+ext);
        return dataURL;
},
    g(selector) {
      var method =
        selector.substr(0, 1) == "."
          ? "getElementsByClassName"
          : "getElementById";
      return document[method](selector.substr(1));
    },

    getPdf() {
      let title = this.htmlTitle;
      $("#pdf").addClass("pdf"); //pdf的css在下一个代码中,作用是使得打印的内容能在pdf中完全显示
      var cntElem = this.g("#pdf");
      var shareContent = cntElem; //需要截图的包裹的（原生的）DOM 对象
      var width = shareContent.offsetWidth; //获取dom 宽度
      var height = shareContent.offsetHeight; //获取dom 高度
      var canvas = document.createElement("canvas"); //创建一个canvas节点
      var scale = 2; //定义任意放大倍数 支持小数
      canvas.width = width * scale; //定义canvas 宽度 * 缩放，在此我是把canvas放大了2倍
      canvas.height = height * scale; //定义canvas高度 *缩放
      canvas.getContext("2d").scale(scale, scale); //获取context,设置scale

      html2Canvas(this.g("#pdf"), {
        allowTaint: true,
        taintTest: true,
        canvas: canvas,
        onrendered: function(canvas) {
          var context = canvas.getContext("2d");
          // 【重要】关闭抗锯齿
          context.mozImageSmoothingEnabled = false;
          context.webkitImageSmoothingEnabled = false;
          context.msImageSmoothingEnabled = false;
          context.imageSmoothingEnabled = false;
          var imgData = canvas.toDataURL("image/jpeg", 1.0); //转化成base64格式,可上网了解此格式
          var img = new Image();
          img.src = imgData;
          img.onload = function() {
            img.width = img.width / 2; //因为在上面放大了2倍，生成image之后要/2
            img.height = img.height / 2;
            img.style.transform = "scale(0.5)";
            var pageHeight = 841.89; //一页高度
            var leftHeight = height * 0.5; //未打印内容高度
            var position = 0; //页面偏移
            var imgWidth = width;
            //var imgHeight = 841.89;
            var imgHeight = height;
            var doc = new JsPDF("p", "pt", "a4");
            if (pageHeight >= leftHeight) {
              //不需要分页，页面高度>=未打印内容高度
              doc.addImage(
                imgData,
                "jpeg",
                35,
                0,
                imgWidth * 0.35,
                imgHeight * 0.5
              );
            } else {
              //需要分页
              while (leftHeight > 0) {
                doc.addImage(
                  imgData,
                  "JPEG",
                  35,
                  position,
                  imgWidth * 0.35,
                  imgHeight * 0.5
                );
                leftHeight -= pageHeight;
                position -= 841.89;
                //避免添加空白页
                if (leftHeight > 0) {
                  doc.addPage();
                }
              }
            }
            doc.save("理化检测报告_" + new Date().getTime() + ".pdf"); //保存为pdf文件
          };
        },
        background: "#fff" //一般把背景设置为白色，不然会出现图片外无内容的地方出现黑色，有时候还需要在CSS样式中设置div背景白色
      });
      $("#pdf").removeClass("pdf");
    },
    getReportResult() {
      this.reportResult = "";
      let finalReportResult = this.form.testResult == 1 ? "合格" : "不合格";
      if (this.editableTabs.length <= 1) {
        this.reportResult = this.reportResult + finalReportResult;
        return;
      }
      for (let i = 0; i < this.editableTabs.length; i++) {
        let title = this.editableTabs[i]["title"] + "结论";
        let reportResult = "合格";
        for (let j = 0; j < this.tableData.length; j++) {
          let tableDataList = this.tableData[i];
          let n = 0;
          let r = tableDataList.length;
          for (let m = 0; m < tableDataList.length; m++) {
            let testResultStatus = tableDataList[m]["testResult"];
            if (testResultStatus == 1) {
              n++;
            }
          }
          if (n == r) {
            reportResult = "合格";
            break;
          } else {
            reportResult = "不合格";
            break;
          }
        }
        this.reportResult =
          this.reportResult +
          "\xa0\xa0\xa0\xa0\xa0\xa0\xa0" +
          title +
          "：" +
          reportResult +
          "      ";
      }
      this.reportResult =
        this.reportResult +
        "\xa0\xa0\xa0\xa0\xa0\xa0\xa0" +
        "最终结论：" +
        finalReportResult;
    },
    downloadResultAttach(id) {
      window.open(
        `${process.env.API_URL}task/downloadResultAttach?resultId=${id}`
      );
    },
    getPosition(type) {
      return getLableFromList(this.positionList, type);
    },
    getData(row, index) {
      if (row.taskField.partField.operator == "choose") {
        return getLableFromList(RESULT_LIST, row["actData" + index]);
      } else {
        return row[`actData${index}`];
      }
    },
    submit(){
      $("#tab tr:not(:first)").empty("");
      this.sampleStatusName="";
      this.fie="";
      this.scode ="";
      this.base64Img= "";
      this.baseImg="";
      this.revImg="";
      this.taskType="";
      this.missionPurpose=true;
      this.dialogVisible = false;
    },
    handleClose() {
      /* 关闭的时候更新状态值 */
      $("#tab tr:not(:first)").empty("");
      this.sampleStatusName="";
      this.fie="";
      this.scode ="";
      this.base64Img= "";
      this.baseImg="";
      this.taskType="";
      this.revImg="";
      this.missionPurpose=true;
      this.isFullScreen = true;
      this.dialogVisible = false;
    },
    handleClick(tab, event) {
      console.log(tab, event);
    }
  }
};
</script>
<style>
.pdf {
  position: fixed;
  left: 0;
  top: 0;
  padding-top: 20px;
  background: #fff;
}

.img-postion {
  overflow: hidden;
    z-index: 100;
    position: absolute;
    right: 0;
    margin-top: -45px;
    margin-right: 350px;
}
.img-baseImg{
  overflow: hidden;
    width: 200;
   float:left;
    z-index: 100;
     right: 0;
    margin-top: -20px;
    margin-left: 200px;
}
.img-base{
   overflow: hidden;
    z-index: 100;
    float: left;
     right: 0;
    margin-top: -20px;
    margin-left: 200px;
}
.table-style-width{
  width:25%;
  text-align:left;
  position: relative;
  background-clip: padding-box;

}
</style>

